define(['jquery', 'semantic', 'utils', 'gitee'], function ($, semantic, utils, gitee) {

    const headerMenu = {
        name: "header-menu",
        props: ['menu', 'active', 'isChildren'],
        methods: {
            route(name) {
                if (Array.isArray(name)) return;
                this.$parent.route(name);
            },
        },
        template: /*html*/`
        <div :class="'hidden-xs-only ' + (!isChildren ? (Array.isArray(menu[2]) ? 'ui pointing dropdown link item' : 'item link') : 'item') + ' ' + (active===menu[2] ? 'active' : '') " @click="route(menu[2])">
            <div v-if="!Array.isArray(menu[2])" class="text">
                <i class="icon large" :class="menu[1]==='' ? 'blue html5' : menu[1]"></i>
                <span class="text">{{menu[0]}}</span>
            </div>
            <template v-else>
                <i class="icon large" :class="menu[1]==='' ? 'blue html5' : menu[1]"></i>
                <span class="text">{{menu[0]}}</span>
                <i class="dropdown icon"></i>
                <div class="menu">
                    <template v-for="imenu in menu[2]">
                        <div v-if="typeof imenu==='string'" class="header">{{imenu}}</div>
                        <header-menu v-else :menu="imenu" :isChildren="true" :active="active"></header-menu>
                    </template>
                </div>
            </template>
        </div>
        `
    };

    return {
        data() {
            return {
                active: "bookmarks",
                menus: [],
                appMenus: [],
                showMenu: false,
                showOperation: false,
                operationList: [
                    ["清空缓存", "clearCache"]
                ],
                asyncOperations: [],
                cpsOperations: {},
                appcfg: {},
                isSmallScreen: false
            }
        },
        components: {
            headerMenu
        },
        watch: {
            $route(newVal, oldVal) {
                this.active = newVal.path.substr(1);
                if (oldVal.path === '/login' && this.menus.length === 0) {
                    // 登录页面跳转过来重新加载菜单
                    this.loadLevelMenu();
                }
            }
        },
        methods: {
            route(name) {
                if (name.startsWith("/") || name.startsWith("http")) {
                    window.open(name);
                    this.showMenu = false;
                    return;
                }
                if (name === this.active) {
                    this.showMenu = false;
                    return;
                };
                this.$router.push(name);
                this.active = name;
                this.showMenu = false;
            },
            toggleLeftMenu() {
                this.showMenu = true;
                //$("#app-leftMenu").sidebar({closable: false}).sidebar('toggle');
            },
            openOperation() {
                this.showOperation = true;
            },
            loadLevelMenu() {
                this.menus = appcfg.menus;
                this.initAppMenus(appcfg.menus);
                this.asyncOperations = appcfg.asyncOperations;
                this.appcfg = appcfg.base;
                document.title = this.appcfg.title;
                this.$nextTick(() => {
                    $(".dropdown").dropdown({
                        on: 'hover',
                        action: function (text, value) {
                            $(this).dropdown('hide');
                        }
                    });
                })
            },
            goURL(url) {
                window.open(url);
            },
            toggle() {
                utils.getVueCps("header").toggleLeftMenu();
            },
            callMethods(method) {
                this[method]();
                this.showOperation = false;
            },
            asyncLoadOperations() {
                gitee.getFileContent(`cps/operations.js`).then(data => {
                    // 动态注入脚本
                    let script = document.createElement('script');
                    script.type = 'text/javascript';
                    script.append(data);
                    document.body.appendChild(script);
                    require(["cps_operations"], (data) => {
                        this.cpsOperations = data;
                    });
                });
            },
            initAppMenus(menus) {
                for (let menu of menus) {
                    if (Array.isArray(menu[2])) {
                        this.initAppMenus(menu[2]);
                    } else {
                        typeof menu !== 'string' && this.appMenus.push(menu);
                    }
                }
            }
        },
        mounted() {

            try {
                this.loadLevelMenu();
            } catch (e) {
                alert(e);
            }

            this.asyncLoadOperations();

            if (utils.isApp) {
                $("#wyd-header").addClass("pt-3");
            }

            this.isSmallScreen = document.documentElement.clientWidth < 600;

        },
        template: /*html*/`
        <div id="wyd-header" class="ui pointing menu wyd-header" wydFlag="header">
            
            <div class="header item link">
                <img class="ui avatar image" :src="appcfg.logo" />
                <span class="font-weight-bold">{{appcfg.title}}</span>
            </div>

            <header-menu v-for="menu in menus" :menu="menu" :active="active"/>

            <div class="right menu">
                <el-tooltip content="导航菜单" placement="bottom">
                    <a class="ui item" @click="toggleLeftMenu">
                        <i class="th fitted icon blue"></i>
                    </a>
                </el-tooltip>
                <el-tooltip content="快捷操作" placement="bottom">
                    <a class="ui item" @click="openOperation">
                        <i class="paper plane fitted outline icon blue"></i>
                    </a>
                </el-tooltip>
            </div>
              
            <el-drawer :visible.sync="showMenu" :append-to-body="true" :modal-append-to-body="false" direction="btt" :size="isSmallScreen?'100%':'50%' " custom-class="overflow-auto">
                <h3 slot="title" class="ui header d-flex justify-content-center align-items-center m-0">
                    <span><i class="ui icon th blue"></i>导航菜单</span>
                </h3>
                <div class="ui selection list d-flex flex-row flex-wrap p-3">
                    <button @click="route(item[2])" class="ui basic button d-flex justify-content-center align-items-center m-1" v-for="item in appMenus">
                        <i class="icon large" :class="item[1]===''?'html5':item[1]"></i>
                        {{item[0]}}
                    </button>
                </div>
            </el-drawer>

            <el-drawer :visible.sync="showOperation" :append-to-body="true" direction="rtl" :size="isSmallScreen?'80%':'30%' " custom-class="overflow-auto">
                <h3 slot="title" class="ui header d-flex justify-content-center align-items-center m-0">
                    <span><i class="ui icon paper plane outline large blue"></i>快捷操作</span>
                </h3>
                <div class="ui selection list d-flex flex-row flex-wrap p-3">
                    <button class="ui basic button d-flex justify-content-center align-items-center m-1" v-for="operation in asyncOperations" @click="cpsOperations[operation[1]]()">
                            <i class="icon large" :class="operation[2]?operation[2]:'code'"></i>{{operation[0]}}
                    </button>
                </div>
            </el-drawer>
            
        </div>
        `,
    }

});
